<template>
	<div
		v-loading="loading"
		class="review-content"
		element-loading-spinner="el-icon-loading"
	>
		<div class="head">
			<span class="title">坐庄分润结算审核详情</span>
			<div v-if="type" class="right-btn">
				<el-button plain @click="goBack">取消</el-button>
				<el-button
					:loading="btnLoading"
					type="success"
					@click="confirm(true)"
				>
					{{
						activeName === '0'
							? $t('funds.fund_audit.audit_success_1')
							: $t('funds.fund_audit.audit_success_2')
					}}
				</el-button>
				<el-button
					:loading="btnLoading"
					type="danger"
					@click="confirm(false)"
				>
					{{
						activeName === '0'
							? $t('funds.fund_audit.audit_fail_1')
							: $t('funds.fund_audit.audit_fail_2')
					}}
				</el-button>
			</div>
			<div v-else class="right-btn">
				<el-button :loading="btnLoading" plain @click="goBack">
					返回
				</el-button>
			</div>
		</div>
		<div class="main-content detailBoxStyle">
			<div class="review-content">
				<p class="name">代理注册信息</p>
				<div class="review-flex">
					<el-table
						:data="[1]"
						:header-cell-style="getRowClass"
						border
						size="mini"
						style="width: 100%"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.register_time')"
						>
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.createDt) ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.last_login_datetime')"
						>
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.lastLoginTime) ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.registry_app_type')"
						>
							<template>
								{{
									typeFilter(
										listData.proxyAccountsRespDTO
											.deviceType,
										'deviceType'
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.register_ip')"
						>
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.registerIp) ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="注册端设备编号">
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.deviceNo) ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="注册域名">
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.registerReference) ||
										'-'
								}}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">代理账号信息</p>
				<div class="review-flex">
					<el-table
						:data="[1]"
						:header-cell-style="getRowClass"
						border
						size="mini"
						style="width: 100%"
					>
						<el-table-column
							align="center"
							:label="$t('funds.proxy_name')"
						>
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.userName) ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.proxy_level_name')"
						>
							<template>
								{{
									listData.proxyAccountsRespDTO.proxyLevel ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="账户类型">
							<template>
								{{
									typeFilter(
										listData.proxyAccountsRespDTO
											.accountType,
										'accountType'
									) || '-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('common.account_status')"
							width="180"
						>
							<template>
								<span
									v-if="
										listData.proxyAccountsRespDTO
											.loginLockStatus === 1
									"
									class="disableRgba"
								>
									{{ $t('common.login_lock_status') }}
								</span>
								<span
									v-if="
										listData.proxyAccountsRespDTO
											.accountLockStatus === 1
									"
									class="deleteRgba"
								>
									{{ $t('common.account_lock_status') }}
								</span>
								<span
									v-if="
										listData.proxyAccountsRespDTO
											.loginLockStatus === 0 &&
											listData.proxyAccountsRespDTO
												.accountLockStatus === 0
									"
									class="normalRgba"
								>
									{{ $t('common.account_status_normal') }}
								</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="私庄模式">
							<template>
								{{
									typeFilter(
										listData.proxyAccountsRespDTO
											.bankerMode,
										'proxyBankerMode'
									) || '-'
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="信用等级">
							<template>
								{{ listData.proxyAccountsRespDTO.creditLevel }}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.proxy_label_name')"
						>
							<template>
								{{
									listData.proxyAccountsRespDTO.labelName ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('common.remark')"
						>
							<template>
								{{
									listData &&
										listData.proxyAccountsRespDTO.remark
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.bind_bank_card_count')"
						>
							<template>
								{{
									listData.proxyAccountsRespDTO.bankCardNum ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.bind_virtual_count')"
						>
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.cryptoAccountNum) ||
										'-'
								}}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">账号风控层级</p>
				<div class="review-flex">
					<el-table
						:data="[1]"
						:header-cell-style="getRowClass"
						border
						size="mini"
						style="width: 100%"
					>
						<el-table-column align="center" label="风险代理">
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.windControlName) ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="风险银行卡">
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.windBankName) ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="风险虚拟币">
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.windCryptoName) ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="风险IP">
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.windIpName) ||
										'-'
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="风险终端设备号">
							<template>
								{{
									(listData &&
										listData.proxyAccountsRespDTO
											.windDevieName) ||
										'-'
								}}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">审核详情</p>
				<div class="review-flex">
					<el-table
						:data="[1]"
						:header-cell-style="getRowClass"
						border
						size="mini"
						style="width: 100%"
					>
						<el-table-column align="center" label="结算时间">
							<template>
								{{
									listData.proxyHolderFeeRecordAuditRespDTO
										.settlementTime || '-'
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="结算周期">
							<template>
								{{
									`${listData.proxyHolderFeeRecordAuditRespDTO
										.startTime || '--'} ~ ${listData
										.proxyHolderFeeRecordAuditRespDTO
										.endTime || '--'}`
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="会员投注盈亏">
							<template>
								<p
									:class="
										calculateShowType(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.netAmount
										)
									"
								>
									{{
										decimalToFixed2(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.netAmount
										)
									}}
								</p>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.total_return_water')"
						>
							<template>
								<p
									:class="
										calculateShowType(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.returnWaterAmount
										)
									"
								>
									{{
										decimalToFixed2(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.returnWaterAmount
										)
									}}
								</p>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.total_discount')"
						>
							<template>
								<p
									:class="
										calculateShowType(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.discountAmount
										)
									"
								>
									{{
										decimalToFixed2(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.discountAmount
										)
									}}
								</p>
							</template>
						</el-table-column>
						<el-table-column align="center" label="会员充提手续费">
							<template>
								{{
									decimalToFixed2(
										listData
											.proxyHolderFeeRecordAuditRespDTO
											.memberDepwithdFee
									)
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="代理充提手续费">
							<template>
								{{
									decimalToFixed2(
										listData
											.proxyHolderFeeRecordAuditRespDTO
											.proxyDepwithdFee
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.venue_cost')"
						>
							<template>
								{{
									decimalToFixed2(
										listData
											.proxyHolderFeeRecordAuditRespDTO
											.venueAmount
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.other_adjustments')"
						>
							<template>
								<p
									:class="
										calculateShowType(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.otherAdjustAmount
										)
									"
								>
									{{
										decimalToFixed2(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.otherAdjustAmount
										)
									}}
								</p>
							</template>
						</el-table-column>
						<el-table-column align="center" label="总优惠分摊">
							<template>
								{{
									decimalToFixed2(
										listData
											.proxyHolderFeeRecordAuditRespDTO
											.discountBack
									)
								}}
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="review-flex">
					<el-table
						:data="[1]"
						:header-cell-style="getRowClass"
						border
						size="mini"
						style="width: 100%"
					>
						<el-table-column
							align="center"
							label="会员充提手续费分摊"
						>
							<template>
								{{
									decimalToFixed2(
										listData
											.proxyHolderFeeRecordAuditRespDTO
											.memberDepwithdBack
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							label="代理充提手续费分摊"
						>
							<template>
								{{
									decimalToFixed2(
										listData
											.proxyHolderFeeRecordAuditRespDTO
											.proxyDepwithdBack
									)
								}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="其他调整分摊">
							<template>
								{{
									decimalToFixed2(
										listData
											.proxyHolderFeeRecordAuditRespDTO
											.otherBack
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="
								$t('funds.fund_audit.last_month_the_balance')
							"
						>
							<template>
								<p
									:class="
										calculateShowType(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.lastMonthAmount
										)
									"
								>
									{{
										decimalToFixed2(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.lastMonthAmount
										)
									}}
								</p>
							</template>
						</el-table-column>
						<el-table-column align="center" label="冲正后净盈亏">
							<template>
								<p
									:class="
										calculateShowType(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.adjustRushAmount
										)
									"
								>
									{{
										decimalToFixed2(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.adjustRushAmount
										)
									}}
								</p>
							</template>
						</el-table-column>
						<el-table-column align="center" label="分润比例">
							<template>
								<div
									class="underline"
									style="width: 100px; text-align: center"
									@click="showPlatRateDetail(listData)"
								>
									{{
										`${handlePercentage(
											listData
												.proxyHolderFeeRecordAuditRespDTO
												.platRate
										)}`
									}}
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" label="平台利润">
							<template>
								{{
									decimalToFixed2(
										listData
											.proxyHolderFeeRecordAuditRespDTO
											.platFee
									)
								}}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="review-content">
				<p class="name">审核信息</p>
				<div class="review-flex">
					<div>
						{{ $t('funds.fund_audit.audit_user_1') }}:{{
							listData.proxyCommissionDetaiVoList[0]
								? listData.proxyCommissionDetaiVoList[0]
										.lockOperator || '-'
								: '-'
						}}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_time_1') }}:{{
							listData.proxyCommissionDetaiVoList[0]
								? listData.proxyCommissionDetaiVoList[0]
										.auditTime || '-'
								: '-'
						}}
					</div>
					<div>
						{{ $t('funds.fund_audit.audit_time_1') }}:{{
							listData.proxyCommissionDetaiVoList[0]
								? listData.proxyCommissionDetaiVoList[0]
										.auditDesc || '-'
								: '-'
						}}
					</div>
				</div>
				<div class="review-flex">
					<div>{{ $t('funds.fund_audit.audit_user_2') }}:-</div>
					<div>{{ $t('funds.fund_audit.audit_time_2') }}:-</div>
					<div>{{ $t('funds.fund_audit.audit_remark_2') }}:-</div>
				</div>
			</div>
		</div>
		<!--提交弹窗-->
		<el-dialog
			:before-close="closeFormDialog"
			:visible.sync="visible"
			center
			class="audit-confirm"
			title="提交确认"
			width="630px"
		>
			<el-form ref="form" :model="form" :rules="formRules">
				<el-form-item label="提交审核信息" prop="auditDesc">
					<el-input
						v-model="form.auditDesc"
						:autosize="{ minRows: 4, maxRows: 4 }"
						:maxlength="50"
						clearable
						:placeholder="$t('common.please_enter')"
						show-word-limit
						style="width: 380px"
						type="textarea"
						v-input="{ name: 'noEmpty' }"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button :loading="btnLoading" @click="closeFormDialog">
					取 消
				</el-button>
				<el-button
					:loading="btnLoading"
					type="primary"
					@click="auditOne"
				>
					提交
				</el-button>
			</div>
		</el-dialog>
		<!--分润比例弹窗-->
		<el-dialog
			:visible.sync="showPlatRateDetailDialog"
			center
			class="audit-confirm"
			title="坐庄分润比例"
			width="630px"
		>
			<el-table :data="platRateDetail" border>
				<el-table-column
					align="center"
					:label="$t('common.serial_number')"
					type="index"
					width="100"
				>
					<template slot-scope="scope">
						<span
							:class="
								scope.row.profitSharingRatio === platRate
									? 'blueColor'
									: ''
							"
						>
							{{ scope.$index + 1 }}
						</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="分润比例(%)" prop="date">
					<template slot-scope="scope">
						<span
							:class="
								scope.row.profitSharingRatio === platRate
									? 'blueColor'
									: ''
							"
						>
							{{ handlePercentage(scope.row.profitSharingRatio) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="游戏亏损(元)"
					prop="gameLoss"
				>
					<template slot-scope="scope">
						<span
							:class="
								scope.row.profitSharingRatio === platRate
									? 'blueColor'
									: ''
							"
						>
							{{
								`≥ ${decimalToFixed2(scope.row.gameLoss)}` ||
									'-'
							}}
						</span>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showPlatRateDetailDialog = false">
					关 闭
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { changeToPercentage } from '@/utils'

export default {
	mixins: [list],
	props: {
		// 审核 true 仅返回 false
		type: Boolean,
		activeName: {
			type: String,
			default: ''
		},
		rowData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			btnLoading: false,
			listData: {
				proxyAccountsRespDTO: {},
				proxyCommissionDetaiVoList: {},
				proxyHolderFeeRecordAuditRespDTO: {}
			},
			form: {
				auditDesc: ''
			},
			formRules: {
				auditDesc: [
					{
						required: true,
						message: '长度必须>=2个字符',
						trigger: 'change'
					}
				]
			},
			visible: false,
			action: false,
			tableTitle: '',
			showPlatRateDetailDialog: false,
			platRateDetail: [],
			dialogVisible: false,
			dialogData: [],
			platRate: 0
		}
	},
	created() {
		this.getInfo()
	},
	methods: {
		changeToPercentage,
		closeFormDialog() {
			this.visible = false
			this.form.auditDesc = undefined
			this.$refs.form.resetFields()
		},
		confirm(action) {
			this.remark = ''
			this.form.auditDesc = ''
			this.action = action
			this.visible = true
		},
		auditOne() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					const params = {
						auditDesc: this.form.auditDesc,
						auditResult: this.action ? 1 : 2,
						proxyId: this.rowData.proxyId,
						reportYm: this.rowData.reportYm
					}
					this.btnLoading = true
					const type =
						this.activeName === '0'
							? 'proxyHolderFeeAuditFirstAudit'
							: 'proxyHolderFeeAuditSecondAudit'

					this.$api[type](params)
						.then((res) => {
							this.btnLoading = false

							if (res?.code === 200) {
								this.$message({
									type: 'success',
									message: this.$t('common.action_success')
								})
								this.visible = false
								this.goBack()
							} else {
								this.$message({
									message: res?.msg || '接口请求异常',
									type: 'error'
								})
							}
						})
						.catch(() => {
							this.btnLoading = false
						})
				}
			})
		},
		goBack() {
			this.$emit('goBack')
		},
		getInfo() {
			const params = {
				reportYm: this.rowData.reportYm,
				proxyId: this.rowData.proxyId,
				countStatus: this.rowData.countStatus
			}

			this.$api
				.proxyHolderFeeAuditDetailAudit(params)
				.then((res) => {
					const { code, msg, data } = res
					if (code === 200) {
						this.listData = data || {}
					} else {
						this.$message({
							message: msg,
							type: 'error'
						})
					}
				})
				.catch((e) => {
					this.loading = false
				})
		},
		async showPlatRateDetail() {
			try {
				if (
					!this.listData.proxyHolderFeeRecordAuditRespDTO
						.holderPolicyTypeId
				) {
					this.$message.error('政策id不存在')
					return
				}
				this.showPlatRateDetailDialog = true
				this.platRate = this.listData.proxyHolderFeeRecordAuditRespDTO.platRate
				const res = await this.$api.profitSharingChangeDetailedList({
					id: this.listData.proxyHolderFeeRecordAuditRespDTO
						.holderPolicyTypeId
				})
				this.platRateDetail = res.data
			} catch (e) {
				this.showPlatRateDetailDialog = false
			}
		},
		calculateShowType(value) {
			return value > 0 ? 'enableColor' : value < 0 ? 'redColor' : 'info'
		}
	}
}
</script>

<style lang="scss" scoped>
.underline {
	cursor: pointer;
	width: 150px;
	color: #004694;
	text-decoration: underline;
}

.txtfeed {
	width: 160px;
	table-layout: fixed;
	word-break: break-all;
	overflow: hidden;
}

::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}

.dialogBox ::v-deep .el-dialog__header {
	text-align: left;
	background: #009688;
	padding: 0 0 0 20px;
	line-height: 38px;

	.el-dialog__title {
		color: #ffffff;
	}

	.el-dialog__headerbtn {
		top: 10px;

		i {
			color: #ffffff;
		}
	}
}

.review-content {
	margin: 24px 16px 20px 16px;
	color: #666666;

	.name {
		font-weight: 600;
	}

	.review-table {
		width: 100%;
		text-align: center; /*文本居中*/
		border-collapse: collapse; /*表格的边框合并，如果相邻，则共用一个边框*/
		border-spacing: 0;
		border: 1px solid rgba(235, 238, 245, 0.712);

		td {
			border-right: 1px solid rgba(235, 238, 245, 0.712);
			border-bottom: 1px solid rgba(235, 238, 245, 0.712);
			height: 37px;
			width: 130px;
			font-size: 12px;
			line-height: 21px;
		}

		.td-title {
			background: rgba(239, 239, 239, 0.849);
			max-width: 56px;
		}
	}

	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;

		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}

		.right-btn {
			float: right;
		}
	}

	.main-content {
		.review-content {
			min-height: 150px;
			border-top: 0;
			padding: 30px;

			.name {
				font-weight: 600;
			}

			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 15px;

				div {
					display: inline-block;
					width: 24%;
				}
			}
		}

		.more-height {
			height: 200px;
		}
	}
}

.success {
	color: #54f945;
}

.danger {
	color: #f20000;
}
</style>
